{% extends 'base/base.html' %}
{% load tags %}

{% block css %}
    <link href="/static/css/plugins/datapicker/datepicker3.css" rel="stylesheet">
    <link href="/static/css/plugins/sweetalert/sweetalert.css" rel="stylesheet">
    <link href="/static/css/plugins/bootstrap-markdown/bootstrap-markdown.min.css" rel="stylesheet">
{% endblock %}

{% block title %}ITAdmin | 服务器{% endblock %}


{% block body %}
<div class="ibox-content">
    <form class="form-horizontal">
        <div class="form-group"><label class="col-sm-2 control-label">主机名&nbsp;<font color="red">*</font></label>
            <div class="col-sm-5"><input type="text" class="form-control" id="servername" value="{{ server.name }}"></div>
        </div>

        <div class="hr-line-dashed"></div>

        <div class="form-group"><label class="col-sm-2 control-label">内存(GB)&nbsp;<font color="red">*</font></label>
            <div class="col-sm-1"><input type="text" class="form-control" id="memory" value="{{ server.memory }}"></div>
        </div>

        <div class="hr-line-dashed"></div>

        <div class="form-group"><label class="col-sm-2 control-label">所在机房</label>
            <div class="col-sm-3">
                <select class="form-control" id="idc">
                    {% for room in rooms %}
                        <option value="{{ room.id }}">{{ room.name }}</option>
                    {% endfor %}
                </select>
            </div>
        </div>

        <div class="hr-line-dashed"></div>

        <div class="form-group"><label class="col-sm-2 control-label">CPU型号&nbsp;<font color="red">*</font></label>
            <div class="col-sm-3">
                <select class="form-control" id="cpu">
                    {% for cpu in cpus %}
                        <option value="{{ cpu.id }}">{{ cpu.name }}</option>
                    {% endfor %}
                </select>
            </div>
        </div>

        <div class="hr-line-dashed"></div>


        <div class="form-group"><label class="col-sm-2 control-label">CPU个数&nbsp;<font color="red">*</font></label>
            <div class="col-sm-1"><input type="text" class="form-control" id="cpucount" value="{{ server.cpu_count }}"></div>
        </div>

        <div class="hr-line-dashed"></div>

        <div class="form-group"><label class="col-sm-2 control-label">SSH端口&nbsp;</label>
            <div class="col-sm-1"><input type="text" class="form-control" id="ssh" value="{{ server.ssh_port }}"></div>
        </div>
        {% if perms.Assets.view_password %}
        <div class="hr-line-dashed"></div>

             <div class="form-group"><label class="col-sm-2 control-label">ROOT密码</label>
                <div class="col-sm-6"><input type="text" class="form-control" id="pwd" value="{{ server.password }}"></div>
            </div>
        {% endif %}

        {% if perms.Assets.view_password %}
        <div class="hr-line-dashed"></div>

             <div class="form-group"><label class="col-sm-2 control-label">MySQL密码</label>
                <div class="col-sm-6"><input type="text" class="form-control" id="mysql_pwd" value="{{ server.mysql_password }}"></div>
            </div>
        {% endif %}

        <div class="hr-line-dashed"></div>

        <div class="form-group">
            <label class="col-sm-2 control-label">硬盘&nbsp;<font color="red">*</font></label>
            <div class="col-sm-6"><input type="text" class="form-control" readonly id="disks"></div>
            <button class="btn btn-success  dim" type="button" id="add_disk" data-toggle="modal" data-target="#diskModal">添加</button>
            <button class="btn btn-danger  dim" type="button" id="del_disk" data-toggle="modal" data-target="#deldiskModal">删除</button>
        </div>

        <div class="hr-line-dashed"></div>

        <div class="form-group">
            <label class="col-sm-2 control-label">IP地址</label>
            <div class="col-sm-6"><input type="text" class="form-control" readonly id="ips"></div>
            <button class="btn btn-success  dim" type="button" id="add_ip" data-toggle="modal" data-target="#ipModal">添加</button>
            <button class="btn btn-danger  dim" type="button" id="del_ip" data-toggle="modal" data-target="#delipModal">删除</button>
        </div>

        <div class="hr-line-dashed"></div>

        <div class="form-group">
            <label class="col-sm-2 control-label">上架时间</label>
            <div class="col-sm-2 input-group date">
                <span class="input-group-addon"><i class="fa fa-calendar"></i></span>
                <input id="date_modified" type="text" class="form-control" value="">
            </div>
        </div>

        <div class="hr-line-dashed"></div>

        <div class="form-group">
            <label class="col-sm-2 control-label">备注</label>
            <div class="col-sm-5">
                <textarea name="content" id="desc" data-provide="markdown" rows="10" class="md-input" style="resize: none; display: block;">{{ server.description }}</textarea>
            </div>
        </div>

        <div class="hr-line-dashed"></div>

        <div class="form-group">
            <div class="col-sm-4 col-sm-offset-5">
                <button class="btn btn-outline btn-warning dim" type="button" id="cancel_add"><i class="fa fa-warning"></i>取消</button>
                <button class="btn btn-primary dim" type="button" id="add_server"><i class="fa fa-check"></i>保存</button>
            </div>
        </div>
    </form>
</div>





<div class="modal inmodal" id="diskModal" tabindex="-1" role="dialog" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content animated flipInY">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">&times;</span><span class="sr-only">Close</span></button>
                <h4 class="modal-title">添加硬盘</h4>
                <small class="font-bold" id="disk_error" style="color: red"></small>
            </div>
            <div class="modal-body">
                <form class="form-horizontal">
                    <div class="form-group"><label class="col-sm-2 control-label" id="disk_name_lable">硬盘名称&nbsp;<font color="red">*</font></label>
                        <div class="col-sm-10"><input type="text" class="form-control" id="disk_name"></div>
                    </div>
                    <div class="hr-line-dashed"></div>
                    <div class="form-group"><label class="col-sm-2 control-label" id="disk_mount_label">挂载目录</label>
                        <div class="col-sm-10"><input type="text" class="form-control" id="disk_mount"></div>
                    </div>
                    <div class="hr-line-dashed"></div>
                    <div class="form-group"><label class="col-sm-2 control-label" id="disk_size_label">硬盘大小&nbsp;<font color="red">*</font></label>
                        <div class="col-sm-10"><input type="text" class="form-control" id="disk_size"></div>
                    </div>
                </form>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-white" data-dismiss="modal">取消</button>
                <button type="button" class="btn btn-primary" data-dismiss="modal" id="save_disk">保存</button>
            </div>
        </div>
    </div>
</div>


<div class="modal inmodal" id="ipModal" tabindex="-1" role="dialog" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content animated flipInY">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">&times;</span><span class="sr-only">Close</span></button>
                <h4 class="modal-title">添加IP</h4>
                <small class="font-bold" id="ip_error" style="color: red"></small>
            </div>
            <div class="modal-body">
                <form class="form-horizontal">
                    <div class="form-group">
                        <label class="col-sm-2 control-label">IP地址&nbsp;<font color="red">*</font></label>
                        <div class="col-sm-10"><input type="text" class="form-control" id="ip_addr"></div>
                    </div>
                    <div class="hr-line-dashed"></div>
                    <div class="form-group">
                        <label class="col-sm-2 control-label">IP地址类型</label>
                        <div class="col-sm-10">
                            <select class="form-control" id="ip_type">
                                <option value="0">内网地址</option>
                                <option value="1">外网地址</option>
                            </select>
                        </div>
                    </div>
                    <div class="hr-line-dashed"></div>
                </form>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-white" data-dismiss="modal">取消</button>
                <button type="button" class="btn btn-primary" data-dismiss="modal" id="save_ip">保存</button>
            </div>
        </div>
    </div>
</div>

<div class="modal inmodal" id="delipModal" tabindex="-1" role="dialog" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content animated flipInY">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" id="close_del_ip"><span aria-hidden="true">&times;</span><span class="sr-only">Close</span></button>
                <h4 class="modal-title">删除IP</h4>
                <small class="font-bold" id="ip_error" style="color: red"></small>
            </div>
            <div class="modal-body">
                <form class="form-horizontal" id="del_ip_form">

                </form>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-white" data-dismiss="modal" id="empty_del_ip">取消</button>
                <button type="button" class="btn btn-primary" data-dismiss="modal" id="save_del_ip">保存</button>
            </div>
        </div>
    </div>
</div>

<div class="modal inmodal" id="deldiskModal" tabindex="-1" role="dialog" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content animated flipInY">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" id="close_del_ip"><span aria-hidden="true">&times;</span><span class="sr-only">Close</span></button>
                <h4 class="modal-title">删除硬盘</h4>
                <small class="font-bold" id="disk_error" style="color: red"></small>
            </div>
            <div class="modal-body">
                <form class="form-horizontal" id="del_disk_form">

                </form>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-white" data-dismiss="modal" id="empty_del_disk">取消</button>
                <button type="button" class="btn btn-primary" data-dismiss="modal" id="save_del_disk">保存</button>
            </div>
        </div>
    </div>
</div>

{% endblock %}


{% block base_script %}
    <script src="/static/js/plugins/datapicker/bootstrap-datepicker.js"></script>
    <script src="/static/js/plugins/sweetalert/sweetalert.min.js"></script>
    <script src="/static/js/plugins/bootstrap-markdown/bootstrap-markdown.js"></script>
    <script src="/static/js/plugins/bootstrap-markdown/markdown.js"></script>
{% endblock %}

{% block script %}
<script>
    $(document).ready(function() {

        $('#date_added').datepicker({
            todayBtn: "linked",
            keyboardNavigation: false,
            forceParse: false,
            calendarWeeks: true,
            autoclose: true
        });

        $('#date_modified').datepicker({
            todayBtn: "linked",
            keyboardNavigation: false,
            forceParse: false,
            calendarWeeks: true,
            autoclose: true
        });

    });
</script>

<script type="text/javascript">
    {% if type == 1 %}
    {% get_disk_array disks %}
    {% get_ip_array ips %}
    var disk_all = '';
    for(var i=0;i<disks.length;i++){
        disk_all = disk_all + '硬盘:' +  disks[i].name + '挂载:' + disks[i].mount_path + '；';
    }
    $('#disks').val(disk_all);
    var ip_all = '';
    for (var i=0;i<ips.length;i++) {
        ip_all = ip_all + ips[i].ip + '；';
    }
    $('#ips').val(ip_all);

    $('#cpu').val("{{ server.cpu.id }}");
    $('#idc').val("{{ server.generatorroom.id }}");
    $('#date_modified').val("{% get_datetime server.add_time %}")
    {% else %}
    {{ disks }}
    {{ ips }}
    {% endif %}
    var del_ip_list = new Array();
    var del_disk_list = new Array();

    $(function () {

        //添加硬盘
        $('#save_disk').click(function () {
            var name = $('#disk_name').val();
            var mount = $('#disk_mount').val();
            var size = $('#disk_size').val();
            if (name == '') {
                swal("错误", "硬盘名称不可为空", "error");
               return;
            }
            if (size == '') {
                swal("错误", "硬盘大小不可为空", "error");
                return;
            }
            var disk = {name:name, mount_path:mount, size:size};
            disks.unshift(disk);
            //将新添加的硬盘信息添加到主界面编辑框
            var disk_all = '';
            for(var i=0;i<disks.length;i++){
                disk_all = disk_all + '硬盘:' +  disks[i].name + '挂载:' + disks[i].mount_path + '；';
            }
            $('#disks').val(disk_all);
        });

        $('#save_ip').click(function () {
            var ip_addr = $('#ip_addr').val();
            var ip_type = $('#ip_type').val();
            if (ip_addr == '') {
                $('#ip_error').text('IP地址不可为空');
                return;
            }
            var ip = {ip:ip_addr, type:ip_type};
            ips.unshift(ip);
            var ip_all = '';
            for (var i=0;i<ips.length;i++) {
                ip_all = ip_all + ips[i].ip + '；';
            }
            $('#ips').val(ip_all);
        });

        $('#add_server').click(function () {
            var name = $('#servername').val();
            var memory = $('#memory').val();
            var idc = $('#idc').val();
            var cpu_id = $('#cpu').val();
            var cpu_count = $('#cpucount').val();
            var add_time = $('#date_modified').val();
            var ssh_port = $('#ssh').val();
            var desc = $('#desc').val();
            {% if perms.Assets.view_password %}
            var pwd = $('#pwd').val();
            var mysql_pwd = $('#mysql_pwd').val();
            {% endif %}
            if (name == '') {
                swal("错误", "主机名不可为空", "error");
                return;
            }
            if (memory == '') {
                swal("错误", "内存不可为空", "error");
                return;
            }
            if (cpu_id == '') {
                swal("错误", "CPU不可为空", "error");
                return;
            }
            if (disks == false) {
                swal("错误", "请添加硬盘", "error");
                return;
            }
            var info = {
                name: name,
                memory: memory,
                generatorroom_id: idc,
                cpu_id: cpu_id,
                cpu_count: cpu_count,
                add_time: add_time,
                ssh_port: ssh_port,
                description: desc,
                {% if perms.Assets.view_password %}
                password: pwd,
                mysql_password: mysql_pwd
                {% endif %}
            }
            var server = {
                server_id: "{{ server_id }}",
                info: JSON.stringify(info),
                disks: JSON.stringify(disks),
                ips: JSON.stringify(ips)
            }
            $.post("{{ request.path }}", server, function (data) {
                if (data.status == 1) {
                    swal({title:"成功!", text:"添加服务器成功", type:"success"},function () {
                        location.href = "{% get_url request %}"
                    });
                } else {
                    swal("错误", "添加失败" + '\n' + data.msg, "error");
                    disks = [];
                    ips = [];
                    return;
                }
            }, 'json');
        });

        $('#del_ip').click(function () {
            $('#del_ip_form').empty();
             for (var i=0;i<ips.length;i++) {
                 var element = '<div class="hr-line-dashed"></div><div class="form-group"><label class="col-sm-3 control-label">' +
                     ips[i].ip + '</label>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<a class="btn btn-danger btn-rounded" id="del_ip_'
                     + i.toString() + '"name="'
                     + i.toString() +'" onclick="del_ip(this)">删除</a></div>';
                 $('#del_ip_form').append(element);
             }
        });

         $('#del_disk').click(function () {
            $('#del_disk_form').empty();
             for (var i=0;i<disks.length;i++) {
                 var element = '<div class="hr-line-dashed"></div><div class="form-group"><label class="col-sm-6 control-label">' + '硬盘名:' +
                     disks[i].name + ',挂载:' + disks[i].mount_path + '</label>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<a class="btn btn-danger btn-rounded" id="del_disk_'
                     + i.toString() + '"name="'
                     + i.toString() +'" onclick="del_disk(this)">删除</a></div>';
                 $('#del_disk_form').append(element);
             }
        });
        
        $('#save_del_ip').click(function () {
            for (var i=0;i<del_ip_list.length;i++) {
                ips.splice(del_ip_list[i], 1);
            }
            var ip_all = '';
            for (var i=0;i<ips.length;i++) {
                ip_all = ip_all + ips[i].ip + '；';
            }
            $('#ips').val(ip_all);
            $('#del_ip_form').empty();
        });

        $('#save_del_disk').click(function () {
            for (var i=0;i<del_disk_list.length;i++) {
                disks.splice(del_disk_list[i], 1);
            }
            var disk_all = '';
            for (var i=0;i<disks.length;i++) {
                disk_all = disk_all + '硬盘:' +  disks[i].name + '挂载:' + disks[i].mount_path + '；';
            }
            $('#disks').val(disk_all);
            $('#del_disk_form').empty();
        });

        $('#cancel_add').click(function () {
            location.href = "{% get_url request %}";
        });
    });

    function del_ip(e) {
        del_ip_list = [];
        id = e.id;
        value = e.name;
        $('#' + id).attr('class', 'btn btn-default btn-rounded');
        $('#' + id).attr('disabled', 'disabled');
        $('#' + id).text('已删除');
        del_ip_list.unshift(parseInt(value));
    }

    function del_disk(e) {
        del_disk_list = [];
        id = e.id;
        value = e.name;
        $('#' + id).attr('class', 'btn btn-default btn-rounded');
        $('#' + id).attr('disabled', 'disabled');
        $('#' + id).text('已删除');
        del_disk_list.unshift(parseInt(value));
    }

</script>
{% endblock %}